{% extends "djangollery/root.html" %}
{% load i18n %}

{% block title %}{{ object.title }}{% endblock %}

{% block dochead %}
<link rel="stylesheet" href="/static/djangollery/css/basic.css" type="text/css" />
<link rel="stylesheet" href="/static/djangollery/css/djangollery.css" type="text/css" />
<script type="text/javascript" src="/static/djangollery/js/jquery-1.3.js"></script>
<script type="text/javascript" src="/static/djangollery/js/jquery.djangollery.js"></script>

<style type="text/css">
	.noscript{display:none}
</style>
{% endblock %}

{% block content %}

<h1>{{ object.title }}</h1>

<h2>
	{% blocktrans with object.date_added|date:"d/m/Y" as date_added %}  
	Published  {{ date_added  }}
	{% endblocktrans %}
</h2>
{% if object.description %}
	<p>{{ object.description }}</p>
{% endif %}
<div id="container">
	<div id="thumbs-adv" >
		<ul class="djangollery-thumbs">
			{% for photo in object.public %}
			<li>
				<a class="djangollery-thumb" href="{{ photo.get_display_url }}" title="{{ photo.title}}">
					<img src="{{ photo.get_thumbnail_url }}" alt="{{ photo.title}}" />
				</a>				
				<div class="djangollery-caption">
					<div class="download">
						<a href="{{ photo.get_original_url }}">{% trans "Download Original" %}</a>
					</div>
					<div class="image-title">{{ photo.title}}</div>
					<div class="image-desc">{{ photo.caption }}</div>
				</div>
			</li>
			{% endfor %}
		</ul>
	</div>
	<div id="gallery-adv" class="content">
		<div id="controls-adv" ></div>
		<div id="loading-adv" ></div>
		<div id="slideshow-adv"></div>
		<div id="caption-adv" ></div>
	</div>


	
</div>
<p><a href="{% url pl-gallery-list 1 %}">{% trans "View all galleries" %}</a></p>
	<script type="text/javascript">
		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
			jQuery(document).ready(function() {

				// var onMouseOutOpacity = 0.67;
				// 						$('#thumbs-adv ul.djangollery-thumbs li').css('opacity', onMouseOutOpacity)
				// 							.hover(
				// 								function () {
				// 									$(this).not('.selected').fadeTo('fast', 1.0);
				// 								}, 
				// 								function () {
				// 									$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
				// 								}
				// 							);


				// Initialize djangollery 
				var galleryAdv = $('#gallery-adv').djangollery('#thumbs-adv', {
					delay:                  2000,
					scroll:                 4, 
					numThumbs:              5,
					preloadAhead:           10,
					enableTopPager:         true,
					enableBottomPager:      true,
					imageContainerSel:      '#slideshow-adv',
					controlsContainerSel:   '#controls-adv',
					captionContainerSel:    '#caption-adv',
					loadingContainerSel:    '#loading-adv',
					renderSSControls:       true,
					renderNavControls:      true,
					playLinkText:           'Reproducir Presentación',
					pauseLinkText:          'Parar Presentación',
					prevLinkText:           '&lsaquo; Foto Anterior',
					nextLinkText:           'Foto Siguiente &rsaquo;',
					nextPageLinkText:       'Siguiente &rsaquo;',
					prevPageLinkText:       '&lsaquo; Anterior',
					showText:				'Mostrar',
					enableHistory:          true,
					autoStart:              false,
					onChange:               function(prevIndex, nextIndex) {
						// $('#thumbs-adv ul.djangollery-thumbs').children()
						// 					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
						// 					.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onTransitionOut:        function(callback) {
						$('#slideshow-adv, #caption-adv').fadeOut('fast', callback);
					},
					onTransitionIn:         function() {
						$('#slideshow-adv, #caption-adv').fadeIn('fast');
					},
					onPageTransitionOut:    function(callback) {
						$('#thumbs-adv ul.djangollery-thumbs').fadeOut('fast', callback);
					},
					onPageTransitionIn:     function() {
						$('#thumbs-adv ul.djangollery-thumbs').fadeIn('fast');
					}

				});

			});

	</script>





{% endblock %}
